<template>
    <div class="goodsInfoContainer">
        <div class="mui-content">
            <div class="mui-card firstCard"  >
				<div class="mui-card-content">
					
                    <div class="swipe">
                        <mt-swipe :auto="4000" style="height: 200px;">
                            <mt-swipe-item v-for="item in swipeImg" :key="item">
                                <img :src="item" alt="" class="swipe_img">
                            </mt-swipe-item>
                        </mt-swipe>
                    </div>

				</div>
			</div>

            <div class="mui-card">
				<div class="mui-card-header">
                    <h3 class="productNameHead">{{info.productName}}</h3>
                </div>

				<div class="mui-card-content addCardContent">
					<div class="priceBlock">
                        <div class="oldPrice price">市场价：<span>{{info.marketPrice}}</span></div>
                        <div class="newPrice price">优惠价：<span>{{info.vipshopPrice}}</span></div>
                    </div>
                    <div class="addNumBlock">
                        <span>购买数量：</span>
                        <div class="mui-numbox shopNum"  data-numbox-min='0'>
                            <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                            <input class="mui-numbox-input" type="number" />
                            <!-- "+"按钮，点击可增大当前数值 -->
                            <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                        </div>
                    </div>
                    <div class="submitButtonBlock">
                        <mt-button size="small" type="primary">立即购买</mt-button>
                        <mt-button size="small" type="danger">加入购物车</mt-button>

                    </div>


				</div>
            </div>    

            <div class="mui-card">
				<div class="mui-card-header"><span class="introTitle">商品简介</span></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{info.vSpuId}}</p>
                        <p>库存:99</p>
                        <p>上次上架时间:{{info.sellTimeFrom | toCompentTime |secToTimeStr}}</p>
					</div>
                   
				</div>
				<div class="mui-card-footer">
                    <div class="buttonContainer_out">
                        <div class="buttonContainer">
                        <mt-button plain size="large" type="primary">图文详情</mt-button>
                    </div>
                     <div class="buttonContainer">
                        <mt-button plain size="large" type="danger">评论</mt-button>
                    </div>
                    </div>
                    
                    
                </div>
			</div>            

        </div>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
import mui from "../../lib/mui/js/mui.min.js"

export default {
    data(){
        return {
            id:null,
            swipeImg:[],
            info:{},
        }
    },
    mounted(){
        mui(".shopNum").numbox();
    },
    created(){
        this.id = this.$route.params.id;
        let data = {id:this.id}
        this.$http.post("shop/goods/info",data).then(res=>{
            if(!res.ok){
                Toast("接口请求失败")
            }
            let data = res.body.data;
            let info  = data["info"];
            this.swipeImg = info["imgs"];
            this.info = data
        });
    },
    filters:{
        toCompentTime:function(data){
            if(data == null){
                return null;
            }
            let dataStr = data+"000";
            return parseInt(dataStr)
        }
    }
}
</script>


<style scoped>
    .mui-content{
        padding-top: 15px;
        padding-bottom: 15px;
        
    }
    .firstCard{
        margin-top: 0px;
    }

    .swipe_img{
        height: 100%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        left: 50%;
    }

    .priceBlock{
        margin-top: 10px;
    }

    .priceBlock div{
        display: inline-block;
    }

    .oldPrice{
        font-size: 15px;
        text-decoration:line-through;

    }

    .newPrice{
        font-size: 15px;
        color: red;
        margin-left: 14px;
    }

    .productNameHead{
        font-size: 19px;
    }

    .addCardContent{
        padding: 14px;
    }

    .addNumBlock span{
        font-size: 15px;
    }

    .addNumBlock{
        margin-top: 10px;
    }

    .submitButtonBlock{
         margin-top: 10px;
    }
    .introTitle{
         font-size: 19px;
    }
    .buttonContainer{
        width: 100%;
        margin-top: 10px;
    }
    .buttonContainer_out{
        width: 100%;
        margin-bottom: 15px;
    }


</style>

